<template>
    <div id="subtmpl">
        <div class="inleft div" @click="substrict">-</div>
        <div class="incenter div" v-text="count"></div>
        <div class="inright div" @click="plus">+</div>
    </div>
</template>
<script>
export default {

    data() {
        return {
            count: 1
        };
    },
    methods: {
        substrict() {
            this.count--;
            if (this.count < 1) {
                this.count = 1;
            }
            this.sendmessage();
        },
        plus() {
            this.count++;
            this.sendmessage();
        },
        sendmessage() {
            this.$emit('senddata', this.count);
        }
    }
}
</script>
<style lang="css" scoped>
#subtmpl .div {
    width: 40px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #000;
    display: inline-block;
    text-align: center;
}
</style>